<template>
  <div class="top10-echart">
    <div class="top10-echart__content" ref="echartRef"></div>
    <div v-if="loading" class="loading">
      <dv-loading>Loading...</dv-loading>
    </div>
  </div>
</template>

<script setup>
import * as echarts from 'echarts'
import { ref, onMounted } from 'vue'

const echartRef = ref()
const props = defineProps({
  data: {
    type: Array,
    default: () => {
      return []
    }
  },
  loading: {
    type: Boolean,
    default: false
  },
})

function handlerData() {
  if (props.data.length > 0) {
    return props.data.map(r => {
      const value = (r.LEVEL * 100).toFixed(2) * 1
      return [value, r.TYPE]
    })
  } else {
    return Array.from({ length: 6 }).map(_ => [0, ""])
  }
}


function draw(rows) {
  let option = {
    textStyle: {
      fontSize: 18,
    },
    dataset: {
      // source: [
      //   // ['score', 'amount', 'product'],
      //   [89.3, 'Matcha Latte'],
      //   [57.1, 'Milk Tea'],
      //   [74.4, 'Cheese Cocoa'],
      //   [50.1, 'Cheese Brownie'],
      //   [89.7, 'Matcha Cocoa'],
      //   [99.1, 'Tea'],
      //   [19.6, 'Orange Juice'],
      //   [10.6, 'Lemon Juice'],
      //   [32.7, 'Walnut Brownie']
      // ]
      source: handlerData()
    },
    grid: {
      containLabel: true,
      top: "10px",
      left: "0",
      right: "80px",
      bottom: "0",
    },
    xAxis: {
      name: '水位(%)',
      axisLine: { // x轴底线
        show: true
      },
      splitLine: { // 分割线
        show: false
      },
      axisLabel: { // x轴坐标样式
        fontSize: 16,
        color: "#FFF"
      }
    },
    yAxis: {
      type: 'category',
      axisLabel: { // y轴坐标样式
        fontSize: 16,
        color: "#FFF"
      }
    },
    // visualMap: {
    //   orient: 'horizontal',
    //   left: 'center',
    //   min: 10,
    //   max: 100,
    //   // text: ['High Score', 'Low Score'],
    //   // Map the score column to color
    //   dimension: 0,
    //   inRange: {
    //     color: ['#FD665F', '#FFCE34', '#65B581']
    //     // 低于40%水位红色警告，40~60%水位橙色预警，高于60%水位绿色显示
    //   },
    //   show: false,
    // },
    series: [
      {
        type: 'bar',
        encode: {
          // Map the "amount" column to X axis.
          x: '水位',
          // Map the "product" column to Y axis
          y: 'product'
        },
        label: {
          show: true,
          position: 'right',
          formatter: (params) => {
            return params.value[0] + "%"
          },
          textStyle: {
            fontSize: 16, // 设置文字大小
            color: "#FFF"
          },
        },
        itemStyle: {
          normal: {
            color: function(params) {
              const val = params.value[0]
              if (val < 40) {
                return "red"
              } else if (val >=40 && val < 60) {
                return "orange"
              } else {
                return "green"
              }
            }
          }
        }
      }
    ]
  };


  if (echartRef.value) {
    let myChart = echarts.init(echartRef.value, 'light', {
      renderer: 'canvas',
      useDirtyRect: false
    })
    myChart.setOption(option)
    setTimeout(myChart.resize, 300)
  }
}

// watch(() => props.labels, draw, { immediate: true })
watch(() => props.data, draw, { immediate: true })

onMounted(() => {
  draw()
})
</script>
<style lang="less" scoped>
.top10-echart {
  width: 100%;
  height: 100%;
  position: relative;
  .top10-echart__content {
    width: 100%;
    height: 100%;
  }
  .loading {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
  }
}
</style>
